<template>
  <div class="Brand_manufacturer">
    <div class="div">
      <span class="ppzxszg">{{name}}</span>
    </div>
    <div class="img">
      <div class="newlist">
        <div class="b" v-for="(img,index) in newGoodsList" :key="img.id" @click="getProduct(img.id)">
          <img :src="img.list_pic_url" style="width:100%">
          <span class="span1">{{img.name}}</span>
          <span class="span2">￥{{img.retail_price.toFixed(2)}}元</span>
        </div>

      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: 'Commoditycomponents',
  props: ['newGoodsList', 'name'],
  methods: {
    getProduct(id) {
      this.$store.dispatch('getBranddetailsList', id)
      setTimeout(() => {
        this.$router.push({ name: 'productDetail', params: { id } })
      }, 500)
    }
  }
}
</script>

<style lang="less" scoped>
.Brand_manufacturer {
  margin-top: 5%;
  height: 20%;
  width: 100%;
  background-color: #fff;
  padding-bottom: 3%;
  border-bottom: 1px solid #cfcdcd;
  .div {
    display: flex;
    justify-content: center;
    .ppzxszg {
      display: block;
      padding-top: 6%;
      font-size: 0.2rem;
    }
  }
  .img {
    .newlist {
      display: flex;
      flex-wrap: wrap;

      margin: 0% 2%;
      padding: 2% 0%;

      .b {
        width: 50%;
        display: flex;
        flex-direction: column;

        img {
          padding: 2% 2%;
        }
        .span1 {
          display: flex;
          justify-content: center;
        }
        .span2 {
          display: flex;
          justify-content: center;
          color: rgb(172, 78, 78);
        }
      }
    }
  }
}
</style>